<!DOCTYPE html>
<html>
<!-- Copyright 2010 andry.virvich@gmail.com. All Rights Reserved. -->
<head>
  <title>Google Code Issue tracker Extension Options</title>
  <style type="text/css">
	.options{
		border:8px solid #87b6d9; 
		border-radius:10px; 
		background-color:#e2e4ff;
		padding:15px;
		font-family: Calibri, tahoma;
		width:450px;
	}
	.top_header{
		color:#2e6eaf;
		padding:15px;
		font-family: Calibri, tahoma;
		text-align:center;
		font-size:20pt;
	}
	.header{
		color:#2e6eaf;
		padding:5px;
		font-family: Calibri, tahoma;
		text-align:center;
		font-size:15pt;
	}
	input[type='text']{
		width:100%;
	}
	.help{
		text-align:left;
		color:#404040;
		font-size:9pt;
		min-width:250px;
	}
  </style>
		<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="js/jquery.json-2.2.min.js"></script>
		<script type="text/javascript" src="js/jquery.selectboxes.js"></script>
	<script type="text/javascript">
var can = [
	['all', 'All issues'],
	['open', 'Open issues'],
	['owned', 'Open and owned by me'],
	['reported', 'Open and reported by me'],
	['starred','Open and starred by me'],
	['new','New issues'],
	['to-verify','Issues to verify']
]
var columns = [["ID", 1],["State", 1], ["Status",1],["Owner",1], ["Assignee",1], ["Summary",1], ["Stars",0], ['Published date',0], ['Updated date',0],['Priority',1],['Type',0]]
  function restoreOptions(){
	var sOpt = localStorage.getItem('projects');
	var opt = [];
	try{
		if(sOpt && sOpt != ''){
			opt = $.evalJSON(sOpt);
		}
		$.map(opt, function(item, i){
			addItem(item);
		});
		
		$.map(can,function(val){
			$("#projectFilter").addOption(val[0], val[1]);
		});
				
		$.map(columns,function(val){
			$("#columns").append($("<INPUT />").attr("type","checkbox").attr("checked", val[1])).append($("<span />").text(val[0])).append("<br />");
		});
		
		var vals = [1, 3, 5, 10, 30, 60];
		var curval = parseInt(localStorage.getItem('updateinterval'))/(1000*60);
		$.map(vals,function(val){
			$("#updateinterval").addOption(val, val, (val == curval));
		});
	}catch(e){
		alert(e);
	}

  }
	function add(bReplace){
		if($('#projectName').val() == ''){
			alert("Please fill the Project Name field!");
		} else {
			var columns = [];
			$.map($("#columns").find("input[type='checkbox']"), function(item){
				columns.push(item.checked);
			});
			var item = {
				"projectName":$('#projectName').val(),
				"projectQuery":$('#projectQuery').val(),
				"projectFilter":$('#projectFilter').val(),
				"tabName": $('#tabName').val()?$('#tabName').val():(item.projectName + " ("+item.projectFilter+")"),
				"columns": columns
			}
			if(bReplace)
				$("#projects").replaceSelectedOption($.toJSON(item),  item.tabName);		
			else
				addItem(item);
		}
	}
	
	function addItem(item){
		$("#projects").addOption($.toJSON(item), (item.tabName?item.tabName:(item.projectName + " ("+item.projectFilter+")")));
	}
	
	function saveOptions(){
		var projects = [];
		$.map($("#projects").find("option"), function(item){
			projects.push($.evalJSON($(item).val()));
		});
		localStorage.setItem('projects', $.toJSON(projects));
		localStorage.setItem('updateinterval', parseInt($("#updateinterval").attr("value"))*60000);
		chrome.extension.getBackgroundPage().loader.tabs = projects;
		chrome.extension.getBackgroundPage().loader.update();
		alert("Settings was saved");
	}
  
  
	function edit(){
		try{
			var selVals = $("#projects").selectedValues();
			var item = $.evalJSON(selVals[0]);
			$('#projectName').val(item.projectName);
			$('#projectQuery').val(item.projectQuery||'');
			$('#projectFilter').selectOptions(item.projectFilter);
			$('#tabName').val(item.tabName?item.tabName:(item.projectName + " ("+item.projectFilter+")"));
			$.map($("#columns").find("input[type='checkbox']"), function(chbx, i){
				$(chbx).attr('checked', item.columns[i]);
			});
		}catch(e){
			alert(e);
		}
	}
  </script>
</head>

<body onload="restoreOptions()">
	<table style="width:100%;height:100%;">
		<tr>
			<td valign="center">
				<center>
				<div class="top_header">Google Code Issue tracker Options</div>
				<table class="options">
				<tr>
					<td colspan="2" class="header">Add/edit tab</td>
				</tr>
				<tr>
					<td align="right">Project Name:</td>
					<td><input id="projectName" type="text" /></td>
				</tr>
				<tr>
					<td align="right">Filter:</td>
					<td><select id="projectFilter" ></select></td>
				</tr>
				<tr>
					<td align="right">Additional query:</td>
					<td><input id="projectQuery" type="text" /></td>
				</tr>
				<tr>
					<td align="right">Tab Label:</td>
					<td><input id="tabName" type="text" /></td>
				</tr>				
				
				<tr>
					<td align="right">Show columns:</td>
					<td id="columns"></td>
				</tr>
				<tr>
					<td colspan="2" align="right">
						<input type="button" value="Add new" onclick="add()"/>
						<input type="button" value="Save" onclick="add(true)"/>
					</td>
				</tr>
				
				
				<tr>
					<td colspan="2" class="header"><hr/>Stored tabs<p class="help">Count of issues on the first tab will display over the icon on the Chrome toolbar</p></td>
				</tr>
				<tr>
					<td colspan="2" ><select id="projects" size="5" style="width:100%;"></select></td>
				</tr>
				<tr>
					<td colspan="2" align="right" >
						<input type="button" value="Move up" onclick='$("#projects").moveUp()'/>
						<input type="button" value="Move down" onclick='$("#projects").moveDown()'/>
						<input type="button" value="Delete tab" onclick='$("#projects").removeOption(/./, true);'/>
						<input type="button" value="Edit tab" onclick='edit()'/>
					</td>
				<tr>
				<tr>
					<td align="right">Update Interval:</td>
					<td ><select id="updateinterval" ></select>, min</td>
				<tr>
				<tr>
					<td colspan="2" align="right"><hr/><input type="button" onclick="saveOptions();" value="Save Options" /></td>
				</tr>
				</table>
				</center>
			</td>
		</tr>
	</table>
</body>
</html>
